<template>
    <div class="warp">
        <div class="menuList">
            <div class="screen">
                <el-input size="mini" @change="search(0)" v-model.trim="queryForm.elderlyCode" autocomplete="off" placeholder="请输入入住人编号/姓名"></el-input>
                <el-date-picker
                    style="width: 100%;margin-top: 5px;"
                    size="mini"
                    v-model="startAndFinish"
                    @change="search(0)"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="入住开始日期"
                    end-placeholder="入住结束日期">
                </el-date-picker>
            </div>
            <div class="list" v-loading="listLoading">
                <ul v-if="list">
                    <li :class="{ 'active': index === showIndex }" v-for="(item, index) in list" @click="showIndex = index; activeRow = item; getList(item)" >
                        <b>{{ item.elderlyName }}</b>
                        <b style="width: 140px">{{ item.checkInBed }}</b>
                        <b>{{ item.nursingLevelName }}</b>
                    </li>
                </ul>
                <div v-else class="listNull">暂无数据</div>
                <el-pagination
                    small
                    layout=" prev, pager, next,total"
                    :current-page=queryForm.currPageNo
                    :total="total"
                    :page-size="queryForm.limit"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                ></el-pagination>
            </div>
        </div>

        <div class="mainbox" v-loading="dataLoading">
            <div v-if="activeRow" class="info">
                <!-- {{ activeRow }} -->
            </div>
            <edit-table :p-info="pInfo" v-if="activeRow" @change="getList()" ref="adviceTable" v-model="adviceList" :config="config"></edit-table>
            <div v-else class="listNull">暂无数据</div>
        </div>
    </div>
</template>

<script>
    import { searchCheckinInfoOfCondition, searchDailyCareListByListTime } from "@/api/record"
    import { medicalSearch } from "@/api/advice"
    import editTable from './components/editTable1'
    export default {
        name: "advice_nurse1",
        components: {
            editTable
        },
        computed:{
            startAndFinish:{
                get(){
                    return [this.queryForm.checkedInTimeStart, this.queryForm.checkedInTimeEnd]
                },
                set(val){
                    this.queryForm.checkedInTimeStart = val ? val[0] : ''
                    this.queryForm.checkedInTimeEnd = val ? val[1] : ''
                },
            },
        },
        data(){
            return {
                scrollHeight:'0px',
                activeName: 'first',
                queryForm: {
                    limit:10,
                    elderlyCode: '',
                    checkedInTimeStart: '',
                    checkedInTimeEnd: '',
                },
                total: 0,
                list: '',
                showIndex: '',
                activeRow: '',
                listLoading: false,
                activeDate: {
                    newVisitis: {
                    },
                    messages: {
                    },
                    purchases: {
                    }
                },
                dataLoading: false,

                adviceList: [],
                config: {
                    column: [
                        { label: '类', type: 'select', key: 'medicalAdviceType', options: [
                            { label: '药物', value: 1 },
                            { label: '护理', value: 2 },
                            { label: '其他', value: 3 },
                        ], width: '80px'},
                        { label: '组', type: 'text', key: 'adviceCode', width: '50px' },
                        { label: '序', type: 'text', key: 'orderNo', width: '50px' },
                        { label: '开始时间', type: 'datetime', key: 'applyExecTime', width: '150px' },
                        { label: '医嘱项目', type: 'input', key: 'item', width: '120px' },
                        { label: '用量', type: 'input', key: 'dosage', width: '80px' },
                        { label: '用法', type: 'selectInput', key: 'useage', filterable: true, options: JSON.parse(localStorage.dictionary).find(item => item.mark == 'usag').childs, opLabel: 'name', opValue: 'remark', width: '80px'},
                        { label: '频率', type: 'selectInput', key: 'frequency', filterable: true, options: JSON.parse(localStorage.dictionary).find(item => item.mark == 'freq').childs, opLabel: 'name', opValue: 'remark', width: '80px'},
                        { label: '备注', type: 'input', key: 'remark', width: '80px' },
                        { label: '数量', type: 'number', key: 'quantity', precision: 0, width: '60px' },
                        { label: '本院', type: 'check', key: 'medicalAdviceSource', width: '60px' },
                        { label: '医师签名', type: 'text', key: 'applyExecDoctorName', width: '80px' },
                        { label: '护士签名', type: 'text', key: 'confirmExecNurseName', width: '80px' },
                        { label: '结束时间', type: 'dateTimeText', key: 'applyTerminationTime', width: '160px' },
                        { label: '结束医师签名', type: 'text', key: 'applyTerminationDoctorName', width: '100px' },
                        { label: '结束护士签名', type: 'text', key: 'confirmTerminationNurseName', width: '100px' },
                    ],
                    data: {
                        medicalAdviceType: '',
                        adviceCode: '',
                        orderNo: '',
                        applyExecTime: '',
                        item: '',
                        dosage: '',
                        useage: '',
                        frequency: '',
                        remark: '',
                        quantity: undefined,
                        medicalAdviceSource: 2,
                        applyExecDoctorName: '',
                        confirmExecNurseName: '',
                        confirmTerminationTime: '',
                        applyTerminationDoctorName: '',
                        confirmTerminationNurseName: '',
                    }
                },
                pInfo: {},
            }
        },
        mounted(){
            this.search(0)
        },
        methods: {
            search(id) {
                this.adviceList = []
                this.activeRow = ''
                this.showIndex = ''
                this.listLoading = true;
                if (id == 0) {
                    this.queryForm.currPageNo = 1
                }
                searchCheckinInfoOfCondition(this.queryForm).then(res => {
                    this.list = res.data.data
                    this.total = res.data.total
                    this.listLoading = false;
                })
            },
            getList(row = this.activeRow) {
                this.dataLoading = true
                this.adviceList = []
                this.$nextTick(() => {
                    this.$refs.adviceTable.valueChange(this.adviceList)
                })
                this.pInfo = row
                medicalSearch(row.checkInMark).then(res => {
                    this.dataLoading = false
                    this.adviceList = res.data || []
                    this.$nextTick(() => {
                        this.$refs.adviceTable.valueChange(this.adviceList)
                    })
                })
                // setTimeout(() => {
                //     this.dataLoading = false
                //     this.adviceList = [
                //         {
                //             applyExecTime: new Date(),
                //             adviceCode: 1,
                //             orderNo: 1,
                //             medicalAdviceType: 1,
                //             item: '外科护理常规',
                //             dosage: '',
                //             useage: '',
                //             frequency: '',
                //             remark: '',
                //             quantity: 1,
                //             applyExecDoctorName: '王振龙',
                //             confirmExecNurseName: '刘宝玉',
                //             confirmTerminationTime: new Date(),
                //             applyTerminationDoctorName: '王振龙',
                //             confirmTerminationNurseName: '刘宝玉',
                //         },
                //         {
                //             applyExecTime: new Date(),
                //             adviceCode: 2,
                //             orderNo: 1,
                //             medicalAdviceType: 2,
                //             item: '氯化钠注射液',
                //             dosage: '100ml',
                //             useage: 'iv drip',
                //             frequency: 'qd',
                //             remark: '',
                //             quantity: 1,
                //             applyExecDoctorName: '王振龙',
                //             confirmExecNurseName: '刘宝玉',
                //             confirmTerminationTime: new Date(),
                //             applyTerminationDoctorName: '王振龙',
                //             confirmTerminationNurseName: '刘宝玉',
                //         },
                //         {
                //             applyExecTime: new Date(),
                //             adviceCode: 2,
                //             orderNo: 2,
                //             medicalAdviceType: 2,
                //             item: '注射用青霉素',
                //             dosage: '',
                //             useage: '',
                //             frequency: '',
                //             remark: '',
                //             quantity: 1,
                //             applyExecDoctorName: '王振龙',
                //             confirmExecNurseName: '刘宝玉',
                //             confirmTerminationTime: new Date(),
                //             applyTerminationDoctorName: '王振龙',
                //             confirmTerminationNurseName: '刘宝玉',
                //         },
                //         {
                //             applyExecTime: new Date(),
                //             adviceCode: 3,
                //             orderNo: 1,
                //             medicalAdviceType: 1,
                //             item: '普通饮食',
                //             dosage: '',
                //             useage: '',
                //             frequency: '',
                //             remark: '',
                //             quantity: 1,
                //             applyExecDoctorName: '王振龙',
                //             confirmExecNurseName: '刘宝玉',
                //             confirmTerminationTime: new Date(),
                //             applyTerminationDoctorName: '',
                //             confirmTerminationNurseName: '',
                //         },
                //         {
                //             applyExecTime: new Date(),
                //             adviceCode: 4,
                //             orderNo: 1,
                //             medicalAdviceType: 3,
                //             item: '氯化钠注射液',
                //             dosage: '100ml',
                //             useage: 'iv drip',
                //             frequency: 'qd',
                //             remark: '',
                //             quantity: 1,
                //             applyExecDoctorName: '',
                //             confirmExecNurseName: '',
                //             confirmTerminationTime: '',
                //             applyTerminationDoctorName: '',
                //             confirmTerminationNurseName: '',
                //         },
                //         {
                //             applyExecTime: new Date(),
                //             adviceCode: 4,
                //             orderNo: 2,
                //             medicalAdviceType: 3,
                //             item: '注射用青霉素1',
                //             dosage: '',
                //             useage: '',
                //             frequency: '',
                //             remark: '',
                //             quantity: 1,
                //             applyExecDoctorName: '',
                //             confirmExecNurseName: '',
                //             confirmTerminationTime: '',
                //             applyTerminationDoctorName: '',
                //             confirmTerminationNurseName: '',
                //         },
                //         {
                //             applyExecTime: new Date(),
                //             adviceCode: 4,
                //             orderNo: 3,
                //             medicalAdviceType: 3,
                //             item: '注射用青霉素2',
                //             dosage: '',
                //             useage: '',
                //             frequency: '',
                //             remark: '',
                //             quantity: 1,
                //             applyExecDoctorName: '',
                //             confirmExecNurseName: '',
                //             confirmTerminationTime: '',
                //             applyTerminationDoctorName: '',
                //             confirmTerminationNurseName: '',
                //         },
                //         {
                //             applyExecTime: new Date(),
                //             adviceCode: 5,
                //             orderNo: 1,
                //             medicalAdviceType: 1,
                //             item: '普通饮食',
                //             dosage: '',
                //             useage: '',
                //             frequency: '',
                //             remark: '',
                //             quantity: 1,
                //             applyExecDoctorName: '王振龙',
                //             confirmExecNurseName: '刘宝玉',
                //             confirmTerminationTime: new Date(),
                //             applyTerminationDoctorName: '王振龙',
                //             confirmTerminationNurseName: '',
                //         },
                //         {
                //             applyExecTime: new Date(),
                //             adviceCode: 6,
                //             orderNo: 1,
                //             medicalAdviceType: 1,
                //             item: '普通饮食',
                //             dosage: '',
                //             useage: '',
                //             frequency: '',
                //             remark: '',
                //             quantity: 1,
                //             applyExecDoctorName: '王振龙',
                //             confirmExecNurseName: '刘宝玉',
                //             confirmTerminationTime: new Date(),
                //             applyTerminationDoctorName: '',
                //             confirmTerminationNurseName: '',
                //         },
                //         {
                //             applyExecTime: new Date(),
                //             adviceCode: 7,
                //             orderNo: 1,
                //             medicalAdviceType: 1,
                //             item: '普通饮食',
                //             dosage: '',
                //             useage: '',
                //             frequency: '',
                //             remark: '',
                //             quantity: 1,
                //             applyExecDoctorName: '王振龙',
                //             confirmExecNurseName: '',
                //             confirmTerminationTime: new Date(),
                //             applyTerminationDoctorName: '',
                //             confirmTerminationNurseName: '',
                //         }
                //     ]
                //     this.$nextTick(() => {
                //         this.$refs.adviceTable.valueChange(this.adviceList)
                //     })
                // }, 500)
            },
            handleSelectionChange(val) {
                console.log(val)
            },
            handleSizeChange(val) {
                this.queryForm.limit = val;
                this.search();
                // setTimeout(() => {
                //     console.log(this.list[0].checkInMark)
                //     if(this.list){
                //         this.activeRow.checkInMark=this.list[0].checkInMark
                //         this.listForm.checkInMark= this.list[0].checkInMark
                //         this.searchDailyCareListByListTime()
                //     }
                //
                // }, 1000);

            },
            handleCurrentChange(val) {
                this.queryForm.currPageNo = val;
                this.search();
            },
            handleClick(row) {
                console.log(row);
            }
        }
    }
</script>

<style scoped>
    .menuList ul{background: #fff;list-style: none;padding: 0;}
    .menuList li{line-height: 40px;padding-left: 10px;transition: all 0.4s;border-bottom: 1px solid #eee;font-size: 14px;}
    .menuList li:first-child{border-top: 1px solid #eee;}
    .menuList li:hover{background: #ccc;cursor: pointer;border-color: #ccc;}
    .menuList li.active{background: #1890ff;cursor: pointer;color: #fff;border-color: #1890ff;}
    .menuList li b{margin-right: 10px;display: inline-block;width: 60px;}

    .warp{position: relative;padding: 20px;}
    .menuList{width: 300px;position: absolute;left: 20px;top: 20px;}
    .mainbox{margin-left: 330px;}
    .listNull{text-align: center;line-height: 200px;}
    .line{background: #fff;margin: 20px;}
    .line h2{line-height: 16px;padding-left: 20px;font-size: 16px;padding-top: 20px;}

    .userInfo{background: #fff;margin: 20px;padding-top: 1px;overflow: hidden;}
    .userInfo .ztBox{width: 120px;height: 120px;border-radius: 50%;border:2px solid #67C23A;text-align: center;line-height: 120px;font-size: 20px;color: #67C23A;box-shadow: 0 0 0 10px #fff, 0 0 0 20px #67C23A;margin: 40px;float: left;}
    .userInfo .ztBox.active{width: 120px;height: 120px;border-radius: 50%;border:2px solid #909399;text-align: center;line-height: 120px;font-size: 20px;color: #909399;box-shadow: 0 0 0 10px #fff, 0 0 0 20px #909399;margin: 40px;}
    .userInfo .box{float: left;width: 100px;text-align: center;margin-left: 50px;padding-top: 30px;}
    .userInfo .box img{height: 60px;}
    .userInfo .box h3{font-size: 16px;}
    .userInfo .box h3 span{color: #67C23A;font-size: 18px;}
    .el-scrollbar{
      height: 90%;

    }

     .mainbox >>> .el-tabs__header {
       margin: 20px;
     }

</style>


